light mode
night mode
অ্যাজাক্স (Ajax)

Ajax এর মাধ্যমে ফর্ম সাবমিটের উদাহরণ

Web Development - অ্যাজাক্স (Ajax) - Ajax এর মাধ্যমে Form Data Submit (Submitting Form Data with Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax এবং PHP এর মাধ্যমে একটি Employee Form সাবমিট করার উদাহরণে, ফর্ম ডেটা পেজ রিফ্রেশ ছাড়াই সার্ভারে পাঠানো হবে এবং প্রাপ্ত রেসপন্স ব্যবহারকারীর কাছে প্রদর্শিত হবে। এখানে HTML, JavaScript (Ajax), এবং PHP ব্যবহার করে ফর্ম সাবমিট করা, ভ্যালিডেশন, এবং ডেটা প্রসেসিং দেখানো হয়েছে।

উদাহরণ: Ajax এবং PHP এর মাধ্যমে Employee Form সাবমিট করা

১. HTML এবং JavaScript (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Employee Form Submission Example</title>
</head>
<body>
    <h1>Employee Form</h1>
    <form id="employeeForm">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
        <br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        <label for="department">Department:</label>
        <input type="text" id="department" name="department" required>
        <br><br>
        <button type="button" onclick="submitEmployeeForm()">Submit</button>
    </form>

    <div id="response-container">
        <!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
    </div>

    <script>
        function submitEmployeeForm() {
            // ফর্ম ডেটা সংগ্রহ করা
            var form = document.getElementById('employeeForm');
            var formData = new FormData(form);

            // XMLHttpRequest অবজেক্ট তৈরি করা
            var xhr = new XMLHttpRequest();

            // POST রিকোয়েস্ট ওপেন করা
            xhr.open("POST", "submit_employee.php", true);

            // রেসপন্স হ্যান্ডলিং সেট করা
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    document.getElementById("response-container").innerHTML = xhr.responseText;
                } else if (xhr.readyState === 4) {
                    // যদি এরর হয়, তাহলে এরর মেসেজ দেখানো
                    document.getElementById("response-container").innerHTML = "Error submitting the form!";
                }
            };

            // রিকোয়েস্ট পাঠানো
            xhr.send(formData);
        }
    </script>
</body>
</html>

বিস্তারিত ব্যাখ্যা:

  • HTML ফাইলে একটি ফর্ম (<form>) তৈরি করা হয়েছে যেখানে নাম, ইমেইল, এবং ডিপার্টমেন্ট ইনপুট ফিল্ড রয়েছে।
  • "Submit" বোতামে ক্লিক করলে submitEmployeeForm() ফাংশন কল হবে, যা Ajax এর মাধ্যমে ফর্ম ডেটা সার্ভারে পাঠাবে এবং রেসপন্স হ্যান্ডল করবে।
  • response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।

২. PHP স্ক্রিপ্ট (submit_employee.php):

<?php
// ফর্ম থেকে ডেটা সংগ্রহ করা
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$department = trim($_POST['department']);

// ভ্যালিডেশন চেক করা
if (empty($name) || empty($email) || empty($department)) {
    echo "All fields are required.";
    exit();
}

if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    echo "Invalid email format.";
    exit();
}

// ডাটাবেস কানেকশন সেটআপ
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "company_db";

$conn = new mysqli($servername, $username, $password, $dbname);

// কানেকশন চেক করা
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// SQL কুয়েরি তৈরি করা
$stmt = $conn->prepare("INSERT INTO employees (name, email, department) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $department);

if ($stmt->execute()) {
    echo "Employee data submitted successfully!";
} else {
    echo "Error: " . $stmt->error;
}

// কানেকশন এবং স্টেটমেন্ট বন্ধ করা
$stmt->close();
$conn->close();
?>

বিস্তারিত ব্যাখ্যা:

  1. ডেটা সংগ্রহ এবং ভ্যালিডেশন:
    • PHP স্ক্রিপ্টে $_POST ব্যবহার করে ফর্ম ডেটা সংগ্রহ করা হয়েছে এবং পরিষ্কার করা হয়েছে।
    • ইনপুট ডেটা ভ্যালিডেশন চেক করা হয়েছে: যদি ইনপুট ফিল্ডগুলো ফাঁকা থাকে বা ইমেইল ফরম্যাট সঠিক না হয়, তাহলে একটি ত্রুটি মেসেজ দেখানো হয়েছে।
  2. ডাটাবেস কানেকশন:
    • PHP স্ক্রিপ্টে ডাটাবেস কানেকশন সেটআপ করা হয়েছে এবং ডাটাবেসে এমপ্লয়ির তথ্য ইনসার্ট করার জন্য INSERT INTO কুয়েরি ব্যবহার করা হয়েছে।
  3. রেসপন্স তৈরি করা:
    • সফল হলে একটি মেসেজ রিটার্ন করা হয়েছে ("Employee data submitted successfully!")।
    • যদি কোনো ত্রুটি থাকে, তাহলে সেই ত্রুটির মেসেজ রিটার্ন করা হয়েছে।

ডাটাবেস সেটআপ:

ডাটাবেসের নাম company_db এবং টেবিলের নাম employees। টেবিলের একটি সিম্পল স্ট্রাকচার:

CREATE TABLE employees (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    department VARCHAR(100) NOT NULL
);

প্রোগ্রামটি কিভাবে কাজ করে:

  1. HTML এবং JavaScript:
    • ব্যবহারকারী ফর্ম পূরণ করে এবং "Submit" বোতামে ক্লিক করে। এরপর submitEmployeeForm() ফাংশন কল হয়।
    • ফাংশনটি Ajax POST রিকোয়েস্ট পাঠায় submit_employee.php এ।
  2. PHP স্ক্রিপ্ট:
    • PHP স্ক্রিপ্ট ইনপুট ডেটা যাচাই করে এবং তা ডাটাবেসে সংরক্ষণ করে। সফল হলে একটি মেসেজ রিটার্ন করে।
  3. JavaScript Response Handling:
    • Ajax রিকোয়েস্ট সফল হলে, PHP স্ক্রিপ্ট থেকে প্রাপ্ত রেসপন্স response-container ডিভে ইনজেক্ট করা হয়।

Error Management:

  • Ajax রিকোয়েস্টে ত্রুটি হ্যান্ডলিং:
    • xhr.onreadystatechange এ চেক করা হয়েছে যে রিকোয়েস্ট সফল হয়েছে কিনা (xhr.status === 200)।
    • যদি রিকোয়েস্ট ব্যর্থ হয়, তাহলে একটি কাস্টম এরর মেসেজ দেখানো হয়েছে।
  • PHP স্ক্রিপ্টে ত্রুটি হ্যান্ডলিং:
    • ইনপুট ডেটা যাচাই এবং ডাটাবেস ইনসার্ট করার সময় PHP ত্রুটি হ্যান্ডলিং করা হয়েছে এবং উপযুক্ত মেসেজ রিটার্ন করা হয়েছে।

Ajax এবং PHP এর মাধ্যমে Employee Form Submission এর সুবিধা:

  • ক্লায়েন্ট এবং সার্ভার সাইড ভ্যালিডেশন: ফর্ম ডেটা ইনপুট ক্লায়েন্ট সাইডে যাচাই করা হয়েছে এবং PHP স্ক্রিপ্টের মাধ্যমে সার্ভার সাইডেও যাচাই করা হয়েছে।
  • পেজ রিফ্রেশ ছাড়াই সাবমিশন: Ajax ব্যবহার করে পেজ রিফ্রেশ ছাড়াই ফর্ম সাবমিশন এবং রেসপন্স দেখানো হয়েছে।
  • ডায়নামিক রেসপন্স: ফর্ম সফলভাবে সাবমিট হলে রিয়েল-টাইমে রেসপন্স পাওয়া গেছে এবং তা UI এ দেখানো হয়েছে।

সারসংক্ষেপ:

  • Ajax এবং PHP: Ajax এবং PHP এর মাধ্যমে Employee Form সাবমিশন করা হয়েছে, যা ওয়েব অ্যাপ্লিকেশনকে আরও ইন্টারেক্টিভ করে তোলে।
  • JavaScript এবং PHP: JavaScript এর মাধ্যমে Ajax POST রিকোয়েস্ট পাঠানো হয়েছে এবং PHP স্ক্রিপ্ট ইনপুট ডেটা প্রক্রিয়া করেছে।
  • Error Management এবং Validation: ফর্ম ইনপুট যাচাই এবং ত্রুটি হ্যান্ডলিং করে ফর্ম প্রক্রিয়াকরণকে আরও নির্ভরযোগ্য এবং ইউজার-ফ্রেন্ডলি করা হয়েছে।

এই উদাহরণটি অনুসরণ করে আপনি Ajax এবং PHP ব্যবহার করে Employee Form সাবমিশন করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে আরও কার্যকর হবে।

আরও দেখুন...

Ajax এর মাধ্যমে ফর্ম সাবমিটের উদাহরণ

or

Don't have an account? Register

Promotion